<template>
  <div class="Theidentityauthentication">
    <div class="Theidentityauthentication-title">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/views/Learningcenter/Authenticationmanagement' }">认证管理</el-breadcrumb-item>
        <el-breadcrumb-item>身份认证</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="Theidentityauthentication-con">
      <div class="Theidentityauthentication-con-con">
        <label>
          <i>*</i>
          <span>身份</span>
          <el-select v-model="identity_type">
            <el-option
              v-for="(item,index) in identity_typeList"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
          <span style="width:20%">（请确保信息真实有效）</span>
        </label>
        <label>
          <i>*</i>
          <span>学校名称</span>
          <input autocomplete="off" type="text" name="username" v-model="schoolname" />
        </label>
        <label>
          <i>*</i>
          <span>所在系</span>
          <input autocomplete="off" type="text" name="username" v-model="department" />
        </label>
        <label>
          <i>*</i>
          <span>专业</span>
          <input autocomplete="off" type="text" name="username" v-model="professional" />
        </label>
        <label>
          <i>*</i>
          <span>语种</span>
          <input autocomplete="off" type="text" name="username" v-model="languages" />
        </label>
        <label>
          <i>*</i>
          <span>籍贯</span>
          <input autocomplete="off" type="text" name="username" v-model="native" />
        </label>
        <label>
          <i>*</i>
          <span>城市</span>
          <input autocomplete="off" type="text" name="username" v-model="city" />
        </label>
        <label>
          <i>*</i>
          <span>所在国家</span>
          <input autocomplete="off" type="text" name="username" v-model="in_country" />
        </label>
        <label>
          <i>*</i>
          <span>个人简介</span>
          <el-input type="text" v-model="personalprofile" maxlength="200" show-word-limit></el-input>
        </label>
      </div>
      <div class="Theidentityauthentication-con-con-title">
        <h2>上传学生证照片</h2>
        <div class="Upload-images">
          <ul>
            <li>
              <el-upload
                class="avatar-uploader"
                action="http://up-z0.qiniup.com"
                :before-upload="beforeUploadGetKey"
                :data="QiNiYun"
                :show-file-list="false"
                :on-success="handleAvatarSuccessFrontofidcard"
              >
                <img v-if="FrontofidcardimageUrl" :src="FrontofidcardimageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </li>
            <li>
              <el-upload
                class="avatar-uploader"
                action="http://up-z0.qiniup.com"
                :before-upload="beforeUploadGetKeys"
                :data="QiNiYuns"
                :show-file-list="false"
                :on-success="handleAvatarSuccessIdcardreverseimageUrl"
              >
                <img v-if="IdcardreverseimageUrl" :src="IdcardreverseimageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </li>
            <li class="Theidentityauthentication-instructions">上传证件必须清晰可见</li>
            <li class="Theidentityauthentication-instructions">上传证件必须清晰可见</li>
            <li class="Submitaudit" @click="submit">
              <span>提交审核</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="Theidentityauthentication-con-footer">
        <div class="Theidentityauthentication-con-footer-title">重要提示：</div>
        <ul>
          <li>照片仅供后台审核使用，绝不对外展示</li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Theidentityauthentication",
  data() {
    return {
      identity_typeList: [
        "留学生",
        "华侨",
        "华裔",
        "境外工作者",
        "政府境外工作者",
        "中文爱好者",
        "全职语言老师",
        "兼职语言老师",
        "国籍",
        "境外商人",
        "学生"
      ],
      identity_type: "",
      schoolname: "",
      department: "",
      professional: "",
      languages: "",
      native: "",
      city: "",
      in_country: "",
      personalprofile: "",
      FrontofidcardimageUrl: "/images/上传学生证@2x.png",
      IdcardreverseimageUrl: "/images/上传手持学生证@2x.png",
      translateIdentity: [
        { overseas_student: "留学生" },
        { overseas_chinese: "华侨" },
        { ethnic_chinese: "华裔" },
        { overseas_staff: "境外工作者" },
        { overseas_government_personnel: "政府境外工作者" },
        { overseas_chinese_learners: "中文爱好者" },
        { language_teacher: "全职语言老师" },
        { language_teacher_concurrent: "全职语言老师" },
        { language_teacher: "兼职语言老师" },
        { overseas_nationality: "国籍" },
        { overseas_merchant: "境外商人" },
        { student: "学生" }
      ],
      QiNiYun: {
        key: "avator",
        token: ""
      },
      QiNiYuns: {
        key: "avator",
        token: ""
      },
      qiniuaddr: "http://101.37.66.151:8768/eg-api/push/upload/getToken",
      upload_qiniu_addr: "http://img.curiousmore.com/",
      unserinfo: JSON.parse(localStorage.getItem("userinfo")),
    };
  },
  mounted() {
    this.getQiniuToken();
    this.getQiniuTokens();
  },
  methods: {
    getQiniuToken() {
      var data = {
        key: this.guid(),
        type: "pic"
      };
      this.$axios({
        method: "POST",
        url: this.qiniuaddr,
        data: data
      })
        .then(response => {
          this.QiNiYun.token = response.data.data;
          this.QiNiYun.key = data.key;
        })
        .catch(error => {
          console.log(error);
        });
    },
    getQiniuTokens() {
      var data = {
        key: this.guid(),
        type: "pic"
      };
      this.$axios({
        method: "POST",
        url: this.qiniuaddr,
        data: data
      })
        .then(response => {
          this.QiNiYuns.token = response.data.data;
          this.QiNiYuns.key = data.key;
        })
        .catch(error => {
          console.log(error);
        });
    },
    beforeUploadGetKey() {
      //每个文件上传之前 给它一个 名字
      //  this.QiNiYun.key = this.guid();
      this.getQiniuToken();
    },
    beforeUploadGetKeys() {
      //每个文件上传之前 给它一个 名字
      //  this.QiNiYun.key = this.guid();
      this.getQiniuTokens();
    },
    submit() {
      if (this.identity_type !== "") {
        this.translateIdentity.map(item => {
          for (let x in item) {
            if (this.identity_type == item[x]) {
              this.identity_type = x;
            }
          }
        });
      } else {
        this.$message("请选择身份");
        return;
      }
      if (this.personalprofile == "") {
        this.$message("请填写介绍");
        return;
      }
      if (this.city == "") {
        this.$message("请填写城市");
        return;
      }
      if (this.in_country == "") {
        this.$message("请填写国家");
        return;
      }
      if (this.professional == "") {
        this.$message("请填写专业");
        return;
      }
      if (this.professional == "") {
        this.$message("请填写专业");
        return;
      }
      if (this.languages == "") {
        this.$message("请填写语种");
        return;
      }
      if (this.department == "") {
        this.$message("请填写系别");
        return;
      }
      if (this.department == "") {
        this.$message("请填写校名");
        return;
      }
      if (/上/.test(this.FrontofidcardimageUrl)) {
        this.$message("请上传学生证正面照片");
        return;
      }
      if (/上/.test(this.IdcardreverseimageUrl)) {
        this.$message("请上传学生证反面照片");
        return;
      }
      console.log(this.unserinfo)
      let data = {
        brief: this.personalprofile,
        card_front: this.FrontofidcardimageUrl,
        card_onhand: this.IdcardreverseimageUrl,
        city: this.city,
        in_country: this.in_country,
        specialty: this.professional,
        language: this.languages,
        department: this.department,
        school_name: this.schoolname,
        identity_type: this.identity_type,
        user_id: this.unserinfo.user_id
      };
      this.$axios({
        method: "POST",
        url: "http://101.37.66.151:8768/eg-api/user/overseasIdentity/insert",
        data: data
      })
        .then(res => {
          console.log(res.data.data);
        })
        .catch(error => {
          console.log(error);
        });
    },
    handleAvatarSuccessFrontofidcard(res, file) {
      //上传身份证正面
      this.FrontofidcardimageUrl = this.upload_qiniu_addr + res.key;
    },
    handleAvatarSuccessIdcardreverseimageUrl(res, file) {
      //上传身份证反面
      this.IdcardreverseimageUrl = this.upload_qiniu_addr + res.key;
    }
  }
};
</script>
<style lang="less" scoped>
.Theidentityauthentication {
  position: relative;
  width: 90%;
  background: #fff;
  border-radius: 20px;
}
.Theidentityauthentication-title {
  position: relative;
  width: 90%;
  height: 40px;
  margin: 0 auto;
  border-bottom: 1px solid #2dc7c8;
  padding-top: 40px;
  /deep/.el-breadcrumb {
    border-left: 14px solid #2dc7c8;
    padding-left: 2%;
  }
  /deep/.el-breadcrumb__inner {
    color: #2dc7c8 !important;
    font-size: 20px !important;
    font-weight: bold !important;
  }
  /deep/.el-breadcrumb__separator {
    color: #2dc7c8;
  }
  /deep/.el-breadcrumb__inner.is-link {
    color: #2dc7c8;
    font-size: 20px;
    font-weight: bold;
  }
}
/*内容样式*/
.Theidentityauthentication-con {
  position: relative;
  width: 90%;
  margin: 0 auto;
}
.Theidentityauthentication-con-con {
  position: relative;
  width: 100%;
  label {
    display: block;
    margin-top: 20px;
    span {
      display: inline-block;
      width: 10%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      font-size: 12px;
      color: #c0c0c0;
    }
    i {
      color: #ff7336;
    }
    input {
      width: 30%;
      margin-left: 2%;
      height: 30px;
      border: 1px solid #cecece;
      padding: 2px 10px 2px 10px;
      outline: none;
    }
    /deep/.el-input {
      width: 33%;
      margin-left: 2%;
      height: 40px;
      outline: none;
    }
    /deep/.el-input__inner {
      height: 40px;
    }
    /deep/.el-input__suffix {
      right: 1%;
      top: 3%;
    }
    /deep/.el-select {
      width: 32%;
      margin-left: 1%;
      border: #cecece;
      .el-input {
        width: 100%;
      }
    }
  }
}
.Theidentityauthentication-con-con-title {
  position: relative;
  width: 100%;
  margin-top: 40px;
  h2 {
    font-size: 16px;
    color: #2dc7c8;
  }
  ul {
    position: relative;
    list-style: none;
    padding: 0;
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    li {
      width: 40%;
      margin-top: 30px;
    }
  }
}
.Theidentityauthentication-instructions {
  text-align: center;
  height: 20px;
  margin-top: 20px !important;
  color: #c3c3c3;
  font-size: 12px;
}
.Submitaudit {
  width: 100% !important;
  height: 20px !important;
  margin-top: 20px !important;
  text-align: center;
  span {
    display: inline-block;
    width: 30%;
    height: 42px;
    line-height: 42px;
    background: rgba(58, 203, 204, 1);
    border-radius: 21px;
    color: #ffffff;
    font-size: 16px;
    cursor: pointer;
  }
}
/*上传图片样式*/
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 238px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 238px;
  height: 178px;
  display: block;
}
.Theidentityauthentication-con-footer {
  position: relative;
  width: 90%;
  height: 100px;
  margin: 0 auto;
  border: 1px dotted #3acbcc;
  margin-top: 20%;
  bottom: 80px;
  ul {
    position: relative;
    width: 90%;
    margin: 0 auto;
    margin-top: 10px;
    padding: 0%;
    li {
      margin-top: 14px;
      font-size: 12px;
      color: #6d6d6d;
      list-style-position: inside;
    }
  }
}
.Theidentityauthentication-con-footer-title {
  position: relative;
  width: 90%;
  color: #ff7336;
  height: 20px;
  line-height: 20px;
  margin: 0 auto;
  font-size: 12px;
  margin-top: 20px;
  font-weight: bold;
}
</style>